* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(200deg, #eef1f5, #e6e9f0);
}

.nav {
    display: flex;
    background-color: #b7a1eb;
    height: 100px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    .menu {
        list-style: none;
        display: flex;
        justify-content: center;
        .item {
            position: relative;
            cursor: pointer;
            padding: 0 10px;
            width: 150px;
            height: 100%;
            &:hover {
                background-color: #a38bdb;

                .link {
                    span {
                        opacity: 1;
                        bottom: 18px;
                    }
                    .fa {
                        transform: translateY(-95%);
                    }
                }
            }
            .link {
                display: block;
                position: relative;
                width: 100%;
                height: 100px;
                color: #fff;
                text-decoration: none;
                overflow: hidden;
                .fa {
                    position: absolute;
                    top: 50%;
                    left: 0;
                    transform: translateY(-50%);
                    width: 100%;
                    text-align: center;
                    font-size: 32px;
                    transition: all 0.4s ease;
                }
                span {
                    position: absolute;
                    width: 100%;
                    bottom: -50%;
                    left: 0;
                    text-align: center;
                    opacity: 1;
                    transition: all 0.4s ease;
                }
            }
        }
    }
}
